<template>
	<view class="main">
		<u-navbar :is-back="true" title="用户注册" :background="background" title-size="32" title-color="#000"  :border-bottom="false" ></u-navbar>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					用户姓名
				</view>
			</view>
			<view class="cont_r">
				<input type="text" placeholder="请输入姓名" v-model="name" />
			</view>
		</view>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					手机号
				</view>
			</view>
			<view class="cont_r">
				<input maxlength="11" type="number" placeholder="请输入手机号" v-model="phone" />
			</view>
		</view>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					验证码
				</view>
			</view>
			<view class="cont_r getcode">
				<input type="number" placeholder="请输入验证码" maxlength="12" v-model="code" />
				<text class="code" @click="getCode()">{{tips}}</text>
			</view>
		</view>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					登录密码
				</view>
			</view>
			<view class="cont_r">
				<input type="text" placeholder="请输入密码" v-model="pwd" />
			</view>
		</view>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					确认密码
				</view>
			</view>
			<view class="cont_r">
				<input type="password" placeholder="请输入再一次输入密码" v-model="newpwd" />
			</view>
		</view>
		<view class="content">
			<view class="cont_l">
				<view class="landian"></view>
				<view class="title">
					楼牌号
				</view>
			</view>
			<view class="cont_r">
				<view class="select">
					<text v-if="build==''||unit==''||number==''" @click="select()">请选择楼牌号</text>
					<text v-else @click="select()">
						<text v-for="(item,index) in arr " :key="index">{{item.label}}</text>
					</text>
				</view>
			</view>
		</view>
		<view class="button" @click="register">
			提交注册
		</view>
		<!-- 验证码组件 -->
		<u-toast ref="uToast"></u-toast>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
		<u-select v-model="show2" mode="mutil-column-auto" :list="buildinglist" @confirm="confirm2"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				name: '',
				phone: '',
				code: '',
				pwd: '',
				newpwd: '',
				buildinglist: [],
				show2: false,
				build: '', //楼
				unit: '',
				number: '',
				arr:[],
				number:''
			}
		},
		onLoad() {
			this.getbuild()
		},
		onShow() {},
		methods: {
			confirm2(e) {
				console.log(e);
				this.arr = e
				this.build = e[0].value
				this.unit = e[1].value
				this.number = e[2].value
			},
			//验证码倒计时
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			//注册
			register() {
				// 
				global.$http.request({
					url: '/register',
					method: 'POST',
					// header: {
					// 	'Authorization': uni.getStorageSync('token') //自定义请求头信息
					// },
					data: {
						username: this.phone,
						password: this.pwd,
						confirmPassword: this.newpwd,
						phonenumber: this.phone,
						userType: 2,
						nickName: this.name,
						code: this.code,
						floorId:this.build,
						unitId:this.unit,
						roomId:this.number,
						
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							mask: true,
							duration: 1000
						})
					}
				})
			},
			getbuild() {
				// 
				global.$http.request({
					url: '/business/untoken/getBuildCascade',
					method: 'GET',
					// header: {
					// 	'Authorization': uni.getStorageSync('token') //自定义请求头信息
					// },
					data: {

					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.buildinglist = res.data.data
					}
				})
			},
			select(){
				this.show2=true
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.main {
			width: 750rpx;

			.content {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				background-color: #fff;

				.cont_l {
					width: 230rpx;
					display: flex;
					align-items: center;

					.landian {
						width: 12rpx;
						height: 12rpx;
						background: #074D93;
						border-radius: 50%;
						margin: 0 20rpx;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 35rpx 0;
					}
				}

				.cont_r {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000;

					input {
						font-size: 28rpx;
					}
				}

				.getcode {
					display: flex;
					justify-content: space-between;

					.code {
						width: 200rpx;
						// margin-right: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FE0000;
					}
				}
			}

			.button {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 98rpx;
				line-height: 98rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				background: #074D93;
			}
		}
	}
</style>
